<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { settingRequest } from '../../utils/fetch'
import { parseJson, validateJson } from '../../utils/json'

const footer = reactive({
    uptime: '<span>xx</span> 小时 <span>xx</span> 分钟',
    today: '<span>xx</span> 小时 <span>xx</span> 分钟',
    holiday: '距离 xxx 还有xx天',
    holidays: [
        { name: '元旦', month: 1, day: 1 },
        { name: '春节', month: 1, day: 29 },
        { name: '清明节', month: 4, day: 4 },
        { name: '劳动节', month: 5, day: 1 },
        { name: '端午节', month: 5, day: 31 },
        { name: '中秋节', month: 9, day: 15 },
        { name: '国庆节', month: 10, day: 1 }
    ],
})

const now = new Date()

const formatUptime = (seconds: number) => {
    let hours = Math.floor(seconds / 3600)
    seconds -= hours * 3600
    let minutes = Math.floor(seconds / 60)
    return `<span>${hours}</span> 小时 <span>${minutes}</span> 分钟`
}

const formatDate = () => {
    const month = now.getMonth() + 1
    const day = now.getDate()
    return `${month} 月 ${day} 日 星期${['日', '一', '二', '三', '四', '五', '六'][now.getDay()]}`
}

const getDaysUntil = (date: any) => {
    const target = new Date(now.getFullYear(), date.month - 1, date.day)
    if (now > target) {
        // 如果今年已过，则计算明年
        target.setFullYear(now.getFullYear() + 1)
    }
    return {
        name: date.name,
        days: Math.ceil((target.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
    }
}

onMounted(() => {
    fetch(settingRequest).then(response => response.json())
        .then((data: any) => {
            if (validateJson(data.body, true)) {
                data.body = parseJson(data.body)
                data.body = JSON.stringify(data.body, null, 2)
            }
            let setting = JSON.parse(data.body)
            if (setting.holidays && setting.holidays.length > 0) {
                footer.holidays = setting.holidays
            }
            const results = footer.holidays.map((holiday) => getDaysUntil(holiday))
            results.sort((a, b) => a.days - b.days)
            footer.holiday = `距离 ${results[0].name} 还有${results[0].days}天`
        }).catch((error: any) => console.error(error))

    footer.today = formatDate()
    footer.uptime = formatUptime(window.electronIpc.uptime())
})
</script>
<template>
    <footer>
        <div class="wrapper">
            <div class="uptime">
                <p v-html="footer.uptime"></p>
                <p>距上次启动时间</p>
            </div>
            <hr>
            <div class="holiday">
                <p>{{ footer.today }}</p>
                <p>{{ footer.holiday }}</p>
            </div>
        </div>
    </footer>
</template>
<style lang="scss" scoped>
footer {
    width: 100%;
    background-color: #000;
    color: #fff;
    user-select: none;

    .wrapper {
        display: flex;
        justify-content: space-between;
        height: 100%;

        hr {
            border: none;
            border-left: 1px solid #3a3a3a;
        }

        .uptime,
        .holiday {
            font-size: 12px;
            padding: 10px 20px;
            color: #c5c5c5;
            letter-spacing: 2px;
            overflow: hidden;

            p {
                :deep(span) {
                    font-size: 16px;
                    font-weight: bold;
                }

                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &:first-child {
                    font-size: 14px;
                    color: #fff;
                    letter-spacing: normal;
                }
            }
        }
    }
}
</style>